<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <meta name="twitter:site" content="@metroui">
    <meta name="twitter:creator" content="@pimenov_sergey">
    <meta name="twitter:card" content="summary">
    <meta name="twitter:title" content="Metro 4 Components Library">
    <meta name="twitter:description" content="Metro 4 is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with responsive grid system, extensive prebuilt components, and powerful plugins  .">
    <meta name="twitter:image" content="https://metroui.org.ua/images/m4-logo-social.png">

    <meta property="og:url" content="https://metroui.org.ua/v4/index.html">
    <meta property="og:title" content="Metro 4 Components Library">
    <meta property="og:description" content="Metro 4 is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with responsive grid system, extensive prebuilt components, and powerful plugins  .">
    <meta property="og:type" content="website">
    <meta property="og:image" content="https://metroui.org.ua/images/m4-logo-social.png">
    <meta property="og:image:secure_url" content="https://metroui.org.ua/images/m4-logo-social.png">
    <meta property="og:image:type" content="image/png">
    <meta property="og:image:width" content="968">
    <meta property="og:image:height" content="504">

    <meta name="author" content="Sergey Pimenov">
    <meta name="description" content="Metro 4 has at its disposal classes and a plugin for creating an accordion element.">
    <meta name="keywords" content="HTML, CSS, JS, Metro, CSS3, Javascript, HTML5, UI, Library, Web, Development, Framework">

    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <link rel="icon" href="favicon.ico" type="image/x-icon">

    <link href="metro/css/metro-all.css?ver=@@b-version" rel="stylesheet">
    <link href="highlight/styles/github.css" rel="stylesheet">
    <link href="docsearch/docsearch.min.css" rel="stylesheet">
    <link href="css/site.css" rel="stylesheet">

    <title>Accordion - Metro 4 :: Popular HTML, CSS and JS library</title>
</head>
<body class="m4-cloak">

<header data-role="html-container" data-insert-mode="replace" data-html-source="header.html"></header>

<div data-role="html-container" data-insert-mode="replace" data-html-source="sidebar-menu.html"></div>

    <div class="container-fluid docs-content">

        <div class="row flex-xl-nowrap">
            <div class="d-none d-block-xl cell-xl-2 order-2 border-left bd-light toc-wrapper">
                <h5>Table of contents</h5>
                <hr/>
                <ul class="toc-nav">
                    <li class="toc-entry"><a href="#">Accordion</a></li>
                    <li class="toc-entry"><a href="#_accordion_about">About</a></li>
                    <li class="toc-entry"><a href="#_accordion_options">Options</a></li>
                    <li class="toc-entry"><a href="#_accordion_active_frame">Active frame</a></li>
                    <li class="toc-entry"><a href="#_accordion_rtl">RTL support</a></li>
                </ul>
            </div>

            <main class="cell-xl-10 order-1 pr-1-sx pl-1-sx pr-5-md pl-5-md">
                <div class="place-right d-none d-block-lg" style="width: 200px;">
                    <img src="images/logo.png" class="w-100" alt="">
                </div>

                <h1>Accordion</h1>
                <p class="text-leader">
                    Metro 4 has at its disposal classes and a plugin for creating an accordion element.
                </p>

                <!-- ads-html -->

                <h3 id="_accordion_about">About</h3>
                <p>
                    The <code>accordion</code> is a graphical control element comprising a vertically stacked list of items, such as labels or thumbnails.
                    Each item can be <code>expanded</code> to reveal the content associated with that item.
                </p>

                <div class="example">
                    <div data-role="accordion" id="a1">
                        <div class="frame">
                            <div class="heading">Header 1</div>
                            <div class="content">
                                <div class="p-2">Cur luba manducare? Pol, a bene ionicis tormento. Warm, sichuan-style pudding is best garnished with aged BBQ sauce.</div>
                            </div>
                        </div>
                        <div class="frame active">
                            <div class="heading">Header 2</div>
                            <div class="content">
                                <div class="p-2">Wildly open a starship. Belay, ye small wench- set sails for hunger! Springy, juicy pudding is best blended with whole ice water.</div>
                            </div>
                        </div>
                        <div class="frame">
                            <div class="heading">Header 3</div>
                            <div class="content">
                                <div class="p-2">Bitter turkey can be made tasty by brushing with sweet chili sauce. Popcorn combines greatly with grey peanut butter.</div>
                            </div>
                        </div>
                    </div>
                </div>
                <pre><code class="html">
                    &lt;div data-role="accordion" data-one-frame="true" data-show-active="true"&gt;
                        &lt;div class="frame"&gt;
                            &lt;div class="heading"&gt;Header 1&lt;/div&gt;
                            &lt;div class="content"&gt;
                                &lt;div class="p-2"&gt;Cur luba manducare? Pol, a bene ionicis tormento...&lt;/div&gt;
                            &lt;/div&gt;
                        &lt;/div&gt;
                        &lt;div class="frame active"&gt;
                            &lt;div class="heading"&gt;Header 2&lt;/div&gt;
                            &lt;div class="content"&gt;
                                &lt;div class="p-2"&gt;Wildly open a starship. Belay, ye small wench- set...&lt;/div&gt;
                            &lt;/div&gt;
                        &lt;/div&gt;
                        &lt;div class="frame"&gt;
                            &lt;div class="heading"&gt;Header 3&lt;/div&gt;
                            &lt;div class="content"&gt;
                                &lt;div class="p-2"&gt;Bitter turkey can be made tasty by brushing with...&lt;/div&gt;
                            &lt;/div&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
                </code></pre>

                <h4>Material design</h4>
                <p>
                    You can enable material design style for accordion with attribute <code>data-material="true"</code>
                </p>
                <div class="example">
                    <div data-role="accordion" id="a2" data-material="true">
                        <div class="frame">
                            <div class="heading">Header 1</div>
                            <div class="content">
                                <div class="p-2">Cur luba manducare? Pol, a bene ionicis tormento. Warm, sichuan-style pudding is best garnished with aged BBQ sauce.</div>
                            </div>
                        </div>
                        <div class="frame active">
                            <div class="heading">Header 2</div>
                            <div class="content">
                                <div class="p-2">Wildly open a starship. Belay, ye small wench- set sails for hunger! Springy, juicy pudding is best blended with whole ice water.</div>
                            </div>
                        </div>
                        <div class="frame">
                            <div class="heading">Header 3</div>
                            <div class="content">
                                <div class="p-2">Bitter turkey can be made tasty by brushing with sweet chili sauce. Popcorn combines greatly with grey peanut butter.</div>
                            </div>
                        </div>
                    </div>
                </div>
                <pre><code class="html">
                    &lt;div data-role="accordion" data-material="true"&gt;
                        &lt;div class="frame"&gt;
                            &lt;div class="heading"&gt;Header 1&lt;/div&gt;
                            &lt;div class="content"&gt;
                                &lt;div class="p-2"&gt;Cur luba manducare? Pol, a bene ionicis tormento...&lt;/div&gt;
                            &lt;/div&gt;
                        &lt;/div&gt;
                        &lt;div class="frame active"&gt;
                            &lt;div class="heading"&gt;Header 2&lt;/div&gt;
                            &lt;div class="content"&gt;
                                &lt;div class="p-2"&gt;Wildly open a starship. Belay, ye small wench- set...&lt;/div&gt;
                            &lt;/div&gt;
                        &lt;/div&gt;
                        &lt;div class="frame"&gt;
                            &lt;div class="heading"&gt;Header 3&lt;/div&gt;
                            &lt;div class="content"&gt;
                                &lt;div class="p-2"&gt;Bitter turkey can be made tasty by brushing with...&lt;/div&gt;
                            &lt;/div&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
                </code></pre>

                <!-- ads-html -->

                <h3 id="_accordion_options">Options</h3>
                <p>
                    You can set additional options for accordion. To set option add attributes:
                        <code>data-duration</code>,
                        <code>data-one-frame</code>,
                        <code>data-show-active</code>,
                        <code>data-active-frame-class</code>,
                        <code>data-active-heading-class</code>,
                        <code>data-active-content-class</code>,
                        <code>data-on-frame-open</code>,
                        <code>data-on-frame-before-open</code>,
                        <code>data-on-frame-close</code>,
                        <code>data-on-frame-before-close</code>,
                        <code>data-on-accordion-create</code>.
                </p>
                <ul>
                    <li><strong>duration</strong> - animation duration (default: 300ms)</li>
                    <li><strong>oneFrame</strong> - visible one frame on one time (default: true)</li>
                    <li><strong>showActive</strong> - show active frame at startup (default: true)</li>
                    <li><strong>activeFrameClass</strong> - custom class for active frame</li>
                    <li><strong>activeHeadingClass</strong> - custom class for active frame heading</li>
                    <li><strong>activeContentClass</strong> - custom class for active frame content</li>
                    <li><strong>onFrameOpen(frame)</strong> - callback executed when frame is open</li>
                    <li><strong>onFrameBeforeOpen(frame)</strong> - if this function return false, frame will not be open</li>
                    <li><strong>onFrameClose(frame)</strong> - callback executed when frame is close</li>
                    <li><strong>onFrameBeforeClose(frame)</strong> - if this function return false, frame will not be close</li>
                    <li><strong>onAccordionCreate(frame)</strong> - callback executed when accordion created</li>
                </ul>

                <div class="example">
                    <div data-role="accordion"
                            data-one-frame="false"
                            data-show-active="true"
                            data-on-frame-open="console.log('frame was opened!', arguments[0])"
                            data-on-frame-close="console.log('frame was closed!', arguments[0])">
                        <div class="frame">
                            <div class="heading">Header 1</div>
                            <div class="content">
                                <div class="p-2">Cur luba manducare? Pol, a bene ionicis tormento...</div>
                            </div>
                        </div>
                        <div class="frame active">
                            <div class="heading">Header 2</div>
                            <div class="content">
                                <div class="p-2">Wildly open a starship. Belay, ye small wench- set...</div>
                            </div>
                        </div>
                        <div class="frame">
                            <div class="heading">Header 3</div>
                            <div class="content">
                                <div class="p-2">Bitter turkey can be made tasty by brushing with...</div>
                            </div>
                        </div>
                    </div>
                </div>
                <pre><code class="html">
                    &lt;div data-role="accordion"
                         data-one-frame="false"
                         data-show-active="true"
                         data-on-frame-open="console.log('frame was opened!', arguments[0])"
                         data-on-frame-close="console.log('frame was closed!', arguments[0])"&gt;
                        &lt;div class="frame"&gt;
                            &lt;div class="heading"&gt;Header 1&lt;/div&gt;
                            &lt;div class="content"&gt;
                                &lt;div class="p-2"&gt;Cur luba manducare? Pol, a bene ionicis tormento...&lt;/div&gt;
                            &lt;/div&gt;
                        &lt;/div&gt;
                        &lt;div class="frame active"&gt;
                            &lt;div class="heading"&gt;Header 2&lt;/div&gt;
                            &lt;div class="content"&gt;
                                &lt;div class="p-2"&gt;Wildly open a starship. Belay, ye small wench- set...&lt;/div&gt;
                            &lt;/div&gt;
                        &lt;/div&gt;
                        &lt;div class="frame"&gt;
                            &lt;div class="heading"&gt;Header 3&lt;/div&gt;
                            &lt;div class="content"&gt;
                                &lt;div class="p-2"&gt;Bitter turkey can be made tasty by brushing with...&lt;/div&gt;
                            &lt;/div&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
                </code></pre>

                <h3 id="_accordion_active_frame">Active frame</h3>
                <p>
                    You can easy change active frame style. To change style for active frame you can create own class and then set it to one of options:
                        <code>data-active-frame-class</code>,
                        <code>data-active-heading-class</code>,
                        <code>data-active-content-class</code>.
                </p>
                <div class="example">
                    <div data-role="accordion" data-active-heading-class="bg-cyan fg-white" data-active-content-class="bg-dark fg-white" >
                        <div class="frame">
                            <div class="heading">Header 1</div>
                            <div class="content">
                                <div class="p-2">Cur luba manducare? Pol, a bene ionicis tormento. Warm, sichuan-style pudding is best garnished with aged BBQ sauce.</div>
                            </div>
                        </div>
                        <div class="frame active">
                            <div class="heading">Header 2</div>
                            <div class="content">
                                <div class="p-2">Wildly open a starship. Belay, ye small wench- set sails for hunger! Springy, juicy pudding is best blended with whole ice water.</div>
                            </div>
                        </div>
                        <div class="frame">
                            <div class="heading">Header 3</div>
                            <div class="content">
                                <div class="p-2">Bitter turkey can be made tasty by brushing with sweet chili sauce. Popcorn combines greatly with grey peanut butter.</div>
                            </div>
                        </div>
                    </div>
                </div>
                <pre><code class="html">
                    &lt;div  data-role="accordion"
                            data-active-heading-class="bg-cyan fg-white"
                            data-active-content-class="bg-dark fg-white" &gt;
                        &lt;div class="frame"&gt;
                            &lt;div class="heading"&gt;Header 1&lt;/div&gt;
                            &lt;div class="content"&gt;
                                &lt;div class="p-2"&gt;Cur luba manducare? Pol, a bene ionicis tormento...&lt;/div&gt;
                            &lt;/div&gt;
                        &lt;/div&gt;
                        &lt;div class="frame active"&gt;
                            &lt;div class="heading"&gt;Header 2&lt;/div&gt;
                            &lt;div class="content"&gt;
                                &lt;div class="p-2"&gt;Wildly open a starship. Belay, ye small wench- set sails...&lt;/div&gt;
                            &lt;/div&gt;
                        &lt;/div&gt;
                        &lt;div class="frame"&gt;
                            &lt;div class="heading"&gt;Header 3&lt;/div&gt;
                            &lt;div class="content"&gt;
                                &lt;div class="p-2"&gt;Bitter turkey can be made tasty by brushing with sweet...&lt;/div&gt;
                            &lt;/div&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
                </code></pre>
                <p>
                    If you are doing a class for an active frame, you must follow the following css structure:
                </p>
                <pre><code class="css">
                    .accordion > .frame.active {
                        ...
                    }

                    .accordion > .frame.active > .heading {
                        ...
                    }

                    .accordion > .frame.active > .content {
                        ...
                    }
                </code></pre>

                <h3 id="_accordion_rtl">Rtl support</h3>
                <p>
                    To set <code>rtl</code> add attribute <code>dir="rtl"</code> to element.
                </p>
                <div class="example">
                    <div dir="rtl" data-role="accordion">
                        <div class="frame">
                            <div class="heading">Header 1</div>
                            <div class="content">
                                <div class="p-2">Cur luba manducare? Pol, a bene ionicis tormento. Warm, sichuan-style pudding is best garnished with aged BBQ sauce.</div>
                            </div>
                        </div>
                        <div class="frame active">
                            <div class="heading">Header 2</div>
                            <div class="content">
                                <div class="p-2">Wildly open a starship. Belay, ye small wench- set sails for hunger! Springy, juicy pudding is best blended with whole ice water.</div>
                            </div>
                        </div>
                        <div class="frame">
                            <div class="heading">Header 3</div>
                            <div class="content">
                                <div class="p-2">Bitter turkey can be made tasty by brushing with sweet chili sauce. Popcorn combines greatly with grey peanut butter.</div>
                            </div>
                        </div>
                    </div>
                </div>
                <pre><code class="html">
                    &lt;div dir="rtl" data-role="accordion"&gt;
                        &lt;div class="frame"&gt;
                            &lt;div class="heading"&gt;Header 1&lt;/div&gt;
                            &lt;div class="content"&gt;
                                &lt;div class="p-2"&gt;Cur luba manducare? Pol, a bene ionicis tormento...&lt;/div&gt;
                            &lt;/div&gt;
                        &lt;/div&gt;
                        &lt;div class="frame active"&gt;
                            &lt;div class="heading"&gt;Header 2&lt;/div&gt;
                            &lt;div class="content"&gt;
                                &lt;div class="p-2"&gt;Wildly open a starship. Belay, ye small wench- set...&lt;/div&gt;
                            &lt;/div&gt;
                        &lt;/div&gt;
                        &lt;div class="frame"&gt;
                            &lt;div class="heading"&gt;Header 3&lt;/div&gt;
                            &lt;div class="content"&gt;
                                &lt;div class="p-2"&gt;Bitter turkey can be made tasty by brushing with...&lt;/div&gt;
                            &lt;/div&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
                </code></pre>

            </main>
        </div>

    </div>

    <script src="docsearch/docsearch.min.js"></script>


    <script src="metro/js/metro.js?ver=@@b-version"></script>
    <script src="highlight/highlight.pack.js"></script>
    <script src="js/clipboard.min.js"></script>
    <script src="js/site.js"></script>
    <!-- ads-script -->
    <!-- ga-script -->
    <!-- hit-ua -->
</body>
</html>
